<template>
	<view class="index-list animated flipInX fast">
		<view class="index-list1 d-flex jc-between ai-center">
			<view class="left d-flex ai-center">
				<image class="avatar" :src="item.userpic" mode="widthFix" lazy-load></image>
				{{item.username}}
			</view>
			<view class="right d-flex ai-center" v-show="!isFollow" @tap="follow">
				<view class="iconfont icon-zengjia"></view>关注
			</view>
		</view>
		<view class="index-list2">{{item.title}}</view>
		<view class="index-list3" @tap="openDetail">
			<!-- 图片 -->
			<image :src="item.titlepic" mode="widthFix" lazy-load></image>
			<!-- 视频 -->
			<template v-if="item.type === 'video'">
				<view class="iconfont icon-bofang index-list-play"></view>
				<view class="index-list-playinfo">{{item.playnum}}次播放 {{item.long}}</view>
			</template>
		</view>
		<view class="index-list4  d-flex jc-between ai-center">
			<view class="left d-flex ai-center jc-between">
				<view class="left-item d-flex ai-center" :class="{'active':infonum.status === 1}" @tap="operate(1)">
					<view class="iconfont icon-icon_xiaolian-mian"></view>{{infonum.dingnum}}
				</view>
				<view class="left-item d-flex ai-center" :class="{'active':infonum.status === 2}" @tap="operate(2)">
					<view class="iconfont icon-kulian"></view>{{infonum.cainum}}
				</view>
			</view>
			<view class="right d-flex ai-center">
				<view class="right-item d-flex ai-center">
					<view class="iconfont icon-pinglun1"></view>{{item.commentnum}}
				</view>
				<view class="right-item d-flex ai-center">
					<view class="iconfont icon-zhuanfa"></view>{{item.sharenum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				isOperate: false,
				isFollow: this.item.isfollow,
				infonum: this.item.infonum
			}
		},
		methods: {
			// 关注
			follow() {
				this.isFollow = true;
				uni.showToast({
					title: "已关注",
					duration: 1000
				})
			},
			// 顶踩
			operate(status) {
				if (!this.isOperate) {
					this.infonum.status = status
					if (status === 1) {
						this.infonum.dingnum += 1 // 顶
					} else {
						this.infonum.cainum += 1 // 踩
					}
					this.isOperate = true
				}
			},
			// 进入详情页
			openDetail(){
				this.$Router.push({
					name: 'detail',
					params: this.item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-list {
		padding: 20upx;
		border-bottom: 1upx solid #EEEEEE;

		.index-list1 {

			.left {
				color: #999;

				.avatar {
					width: 90upx;
					height: 90upx;
					border-radius: 50%;
					margin-right: 10upx;
				}
			}

			.right {
				background: #f1f1f1;
				border-radius: 8upx;
				padding: 0 10upx;
			}
		}

		.index-list2 {
			padding-top: 15upx;
			font-size: 32upx;
		}

		.index-list3 {
			position: relative;
			padding-top: 15upx;

			image {
				width: 100%;
				border-radius: 20upx;
			}

			.index-list-play {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 100upx;
				color: #FFFFFF;
			}

			.index-list-playinfo {
				position: absolute;
				bottom: 20upx;
				right: 20upx;
				font-size: 26upx;
				color: #FFFFFF;
				background-color: rgba(0, 0, 0, .3);
				padding: 0 10upx;
				border-radius: 16upx;
			}
		}

		.index-list4 {
			.left {
				.left-item {
					color: #999;
					margin-right: 10upx;

					&.active {
						color: #ff5757;
					}

					.iconfont {
						margin-right: 10upx;
					}
				}
			}

			.right {
				.right-item {
					color: #999;
					margin-right: 10px;

					.iconfont {
						margin-right: 10upx;
					}
				}
			}
		}
	}
</style>
